<template>
  <TmDrawer :width="500" :height="600" :hide-header="true" class="drawer" placement="center" v-model:show="show"
    @close="emit('close')" @open="onInit">
    <TmSheet :round="4">
      <view class="title">
        <TmText :font-size="28" :label="title" />
      </view>
      <slot></slot>
    </TmSheet>

  </TmDrawer>
</template>
<script setup lang='ts'>
import TmDrawer from "@/tmui/components/tm-drawer/tm-drawer.vue";
import TmSheet from "@/tmui/components/tm-sheet/tm-sheet.vue";
import TmText from "@/tmui/components/tm-text/tm-text.vue";

const emit = defineEmits(['close'])

const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: ''
  }
})
const show = toRef(props, 'show')
const title = toRef(props, 'title')

const onInit = () => {
  console.log('onInit');

}

</script>
<style lang='scss' scoped>
.drawer {
  .title {
    display: flex;
    align-items: center;
  }
}
</style>